<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-1 flex v-align-c">
      <span></span>
      <i>商品组</i>
    </h2>
    <div class="goods-form">
      <h3 class="pancel-s-title">个性化设置</h3>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <div class="border-box near-box">
          <h4>选择商品</h4>
          <div class="mar-t--5 mar-b-15">
            <el-form-item class="mar-b-10">
              <div class="font-14">
                <el-row>
                  <el-col :span="24">
                    <el-radio-group v-model="details.propMap.selectType">
                      <el-radio label="10">手动选择</el-radio>
                      <el-radio v-if="appType == 10 || appType == 11" label="11">自动选择</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
            <div class="mar-r--20 flex">
              <draggable id="content-box flex-item" v-model="details.goodsList" dragable="true" :move="getdata" @update="datadragEnd">
                <template v-if="details.goodsList && details.propMap.selectType === '10'">
                  <el-form-item class="border-bar goods-s-lists"
                    v-for="(item, index) in details.goodsList" :key="'goods-list-' + index">
                    <div class="goods-remove" @click="removeGoods(item)">
                      <i class="el-icon-error" />
                    </div>
                    <div class="goods-pic-box width-50 mar-r-10" @click="selectGoodsLayer(index)">
                      <template v-if="item.imgUrl">
                        <!-- 有图片展示 -->
                        <img :src="item.imgUrl" class="width-50 height-50 border-radius-5">
                      </template>
                      <template v-else>
                        <!-- 没图片展示 -->
                        <label></label>
                      </template>
                    </div>
                  </el-form-item>
                </template>
              </draggable>
              <div class="clear-both"></div>
            </div>
            <div class="flex" v-if="details.propMap.selectType === '10'">
              <el-button class="flex-item" @click="addGoods">
                <i class="el-icon-plus mar-r-5"></i>添加商品
              </el-button>
            </div>
            <template v-if="details.propMap.selectType === '11'">
              <el-form-item>
                <div class="v-align-c">
                  <div class="width-80 text-align-r">选择模式</div>
                  <el-select class="mar-l-10" v-model="details.propMap.selectMode" placeholder="请选择" style="width: 130px;" @change="selectModeChange">
                    <el-option
                      v-for="item in selectOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="v-align-c mar-t-15">
                  <div class="width-80 text-align-r mar-r-10">{{goodsTypeTrs}}</div>
                  <!--校验系统参数 -->
                  <div v-if="details.propMap.selectMode === '10'">
                    <div v-if="appType == 11 && enterpriseConfig.categorySeparate == 1">
                      <!-- 批发+开启 -->
                      <span v-if="enterpriseConfig.wholesaleCategoryAlias == 1">
                      <el-cascader v-model="wholesaleCategoryIds" placeholder="选择商品分类"
                    :options="wholesaleCategoryData"
                    class="default-input" 
                    :props="{ checkStrictly: true }" change-on-select
                    filterable @change="changeGoodsCategory" />
                    </span>
                    <span v-else>
                      <el-cascader v-model="wholesaleCategoryIds" placeholder="选择商品分类"
                    :options="categoryData"
                    class="default-input" 
                    :props="{ checkStrictly: true }" change-on-select
                    filterable @change="changeGoodsCategory" />
                    </span>
                    </div>
                    <div v-else>
                      <el-cascader v-model="goodsCategoryIds" placeholder="选择商品分类"
                    :options="categoryData"
                    class="default-input" 
                    :props="{ checkStrictly: true }" change-on-select
                    filterable @change="changeGoodsCategory" />
                    </div>
                  </div>
                  <div v-if="details.propMap.selectMode === '11'">
                    <el-select class="mar-r-3 width-130" v-model="details.propMap.modeId" placeholder="选择商品品牌" @change="changeModeId">
                      <el-option v-for="item in brandList" :key="item.brandId" :label="item.brandName" :value="item.brandId">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-if="details.propMap.selectMode === '12'">
                    <el-select class="mar-r-3 width-130" v-model="details.propMap.modeId" placeholder="选择品牌分类" @change="changeModeId">
                      <el-option v-for="item in brandCategoryList" :key="item.brandCategoryId" :label="item.brandCategoryName" :value="item.brandCategoryId">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-if="details.propMap.selectMode === '13'">
                    <el-select class="mar-r-3 width-130" v-model="details.propMap.modeId" placeholder="选择商品分组" @change="changeModeId">
                      <el-option v-for="item in goodsGroupList" :key="item.goodsGroupId" :label="item.goodsGroupName" :value="item.goodsGroupId">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-if="details.propMap.selectMode === '20'">
                    <el-select class="mar-r-3 width-130" v-model="details.propMap.modeId" placeholder="选择供应商分类" @change="changeModeId">
                      <el-option v-for="item in supplierCategoryList" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-if="details.propMap.selectMode === '21'" class="flex-item">
                    <el-select class="mar-r-3 width-130" v-model="supplierArea.provinceCode" placeholder="请选择省份" @change="changeProvince(supplierArea.provinceCode)">
                      <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                      </el-option>
                    </el-select>
                    <el-select class="mar-r-3 mar-t-10 width-130" v-model="supplierArea.cityCode" placeholder="请选择城市" @change="changeCity(supplierArea.cityCode)">
                      <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                      </el-option>
                    </el-select>
                    <el-select class="mar-r-3 mar-t-10 width-130" v-model="supplierArea.districtCode" placeholder="请选择区县" @change="changeDistrict(supplierArea.districtCode)">
                      <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div v-if="false" class="v-align-ct mar-t-10">
                  <div class="width-80 text-align-r mar-r-10">商品数量</div>
                  <div>
                    <el-radio-group v-model="details.propMap.goodsNumType">
                      <el-radio label="10">显示所有</el-radio>
                      <el-radio label="11">自定义</el-radio>
                    </el-radio-group>
                    <div class="mar-l-8 v-align-c" v-if="details.propMap.goodsNumType === '11'">
                      <el-slider class="flex-item" v-model="details.propMap.goodsNumLimit" :min="1" :max="20"></el-slider>
                      <div class="mar-l-15 goods-num">{{details.propMap.goodsNumLimit}}个</div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </template>
          </div>
        </div>
        <div class="border-box">
          <h4>样式风格</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsStyle" label="12">单列横排</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsStyle" label="14">横向滚动</el-radio>
                  </el-col>
                </el-row>
              </div> 
            </el-form-item>
          </div>
        </div>
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">背景设置</h3>
        </div>
        <div v-if="details.propMap.goodsStyle == 14" class="border-box near-box">
          <h4>背景卡片</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <el-upload class="avatar-uploader"
                action="/api/common/uploadFiles"
                accept="image/jpeg,image/gif,image/png,image/bmp"
                list-type="picture-card-s radius-0"
                :before-upload="beforeUploadPicture" name="files"
                v-loading="fileLoadingPicture"
                :data="token" :show-file-list="false" :on-success="handleUploadSuccessPicture">
                  <img v-if="details.propMap.backgroundImg" :src="details.propMap.backgroundImg" width="70px" height="70px">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
          </div>
        </div>
        <div class="border-box">
          <h4>背景卡片样式</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsDetailStyle" label="10">卡片投影</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsDetailStyle" label="11">描边白底</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.goodsDetailStyle" label="12">无边白底</el-radio>
                  </el-col>
                  <el-col :span="12"></el-col>
                </el-row>
              </div> 
            </el-form-item>
          </div>
        </div>        
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">商品样式</h3>
        </div>
        <div class="border-box near-box">
          <h4>商品组背景</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.goodsBackgroundColor" 
                  @active-change="activecolorChange(details, 'goodsBackgroundColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'goodsBackgroundColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.goodsBackgroundColor"
                  @change="iptColorChange(details, 'goodsBackgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'goodsBackgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>标签背景</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.tagsBackgroundColor" 
                  @active-change="activecolorChange(details, 'tagsBackgroundColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'tagsBackgroundColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.tagsBackgroundColor"
                  @change="iptColorChange(details, 'tagsBackgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'tagsBackgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>标签文字</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.tagsColor" 
                  @active-change="activecolorChange(details, 'tagsColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'tagsColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.tagsColor"
                  @change="iptColorChange(details, 'tagsColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'tagsColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>商品标题</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.goodsTitleColor" 
                  @active-change="activecolorChange(details, 'goodsTitleColor', '#333333', $event)" 
                  @change="colorChange(details, 'goodsTitleColor', '#333333', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.goodsTitleColor"
                  @change="iptColorChange(details, 'goodsTitleColor', '#333333', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'goodsTitleColor', '#333333')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>预计赚</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.incomeColor" 
                  @active-change="activecolorChange(details, 'incomeColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'incomeColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.incomeColor"
                  @change="iptColorChange(details, 'incomeColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'incomeColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>观众购买价</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.goodsPriceColor" 
                  @active-change="activecolorChange(details, 'goodsPriceColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'goodsPriceColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.goodsPriceColor"
                  @change="iptColorChange(details, 'goodsPriceColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'goodsPriceColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>文字标题</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.fontTitleColor" 
                  @active-change="activecolorChange(details, 'fontTitleColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'fontTitleColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.fontTitleColor"
                  @change="iptColorChange(details, 'fontTitleColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'fontTitleColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4 v-if="details.propMap.goodsStyle != 14">已售数值色</h4>
          <div v-if="details.propMap.goodsStyle != 14" class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="details.propMap.salesNumColor" 
                  @active-change="activecolorChange(details, 'salesNumColor', '#F8303D', $event)" 
                  @change="colorChange(details, 'salesNumColor', '#F8303D', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.salesNumColor"
                  @change="iptColorChange(details, 'salesNumColor', '#F8303D', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'salesNumColor', '#F8303D')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box">
          <h4>商品组样式</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="v-align-c font-12">
                <span>圆角</span>
                <el-slider v-model="details.propMap.radius" class="flex-item mar-l-15" :max="50"></el-slider>
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50"
                  v-model="details.propMap.radius" @input="marginChange(details, 'radius', $event)">
                  <template slot="append">px</template>
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">组件样式</h3>
        </div>
        <div class="border-box">
          <h4>背景</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.backgroundType" label="10">背景颜色</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.backgroundType"
                      @change="resetColor(details, 'backgroundColor', '')" label="11">透明</el-radio>
                  </el-col>
                </el-row>
              </div>
              <div class="flex font-12 pad-r-30 pad-l-4" v-if="details.propMap.backgroundType == 10">
                <el-color-picker 
                  v-model="details.propMap.backgroundColor" 
                  @active-change="activecolorChange(details, 'backgroundColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'backgroundColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.backgroundColor"
                  @change="iptColorChange(details, 'backgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'backgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>            
          </div>
        </div>
      </el-form>
    </div>
    <!-- 商品选择弹层 -->
    <el-dialog :title="selectGoodsTitle" :visible.sync="selectGoodsVisible" :close-on-press-escape="true" width="1038px">
      <div class="scroll-layer-box">
        <component-goods-select :details1="details" :appType="appType"></component-goods-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectGoodsVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getToken } from '@/utils/auth'
  import ComponentGoodsSelect from './../ComponentGoodsSelect'
  import { listGoodsCategory, listWholesaleGoodsCategory } from '@/api/goods/goods'
  import { listProvince, listCity, listDistrict } from '@/api/area/area'
  import { listBrand, listBrandCategory } from '@/api/user/enterpriseBrand'
  import { listSupplierCategory } from '@/api/user/supplierCategory'
  import { listGoodsGroup } from '@/api/goods/goodsGroup'
  import { getGoodsPage } from '@/api/custom-page/page'
  import { getByEnterpriseId } from '@/api/user/enterprise'
  import draggable from 'vuedraggable'

  export default {
    components: {
      ComponentGoodsSelect,
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 13
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {
          },
          goodsList: []
        },
        fileLoading: false,
        sortNo: 0,
        goodsDetails: {
          componentGoodsId: '',
          detailsId: '',
          goodsId: '',
          goodsSortNo: 0,
          imgUrl: '',
          title: '',
          price: '',
          stock: ''
        },
        selectGoodsVisible: false,
        selectGoodsTitle: null,
        predefineColors: [],
        selectOptions: [{
          label: '商品分类',
          value: '10'
        }, {
          label: '商品品牌',
          value: '11'
        }, {
          label: '品牌分类',
          value: '12'
        }, {
          label: '商品分组',
          value: '13'
        }, {
          label: '供应商分类',
          value: '20'
        }, {
          label: '供应商地区',
          value: '21'
        }],
        brandList: [],
        brandCategoryList: [],
        supplierCategoryList: [],
        categoryData: [],
        // 批发商品类目
        wholesaleCategoryData: [],
        goodsGroupList: [],
        goodsCategoryIds: [],
        // 选中的批发商品类目
        wholesaleCategoryIds: [],
        goodsGroupIds: [],
        // 系统参数
        enterpriseConfig: {
          categorySeparate: '0',
          wholesaleCategoryAlias: '0'
        },
        supplierArea: {
          provinceCode: '',
          cityCode: '',
          districtCode: ''
        },
        provinceList: [],
        cityList: [],
        districtList: [],
        fileLoadingPicture: false,
        qiniuToken: {}
      }
    },
    computed: {
      goodsTypeTrs() {
        let data = ''
        this.selectOptions.forEach(item => {
          if (item.value === this.details.propMap.selectMode) {
            data = item.label
          }
        })
        return data
      }
    },
    mounted() {
      const that = this
      this.$bus.$on('choiceDetailsGoods', function(data) {
        that.details.goodsList[data.goodsSortNo].goodsSortNo = data.goodsSortNo
        that.details.goodsList[data.goodsSortNo].imgUrl = data.imgUrl
        that.details.goodsList[data.goodsSortNo].goodsId = data.goodsId
        that.details.goodsList[data.goodsSortNo].title = data.title
        that.details.goodsList[data.goodsSortNo].price = data.price
        that.details.goodsList[data.goodsSortNo].stock = data.stock
        that.details.goodsList[data.goodsSortNo].salesNum = data.salesNum
        that.details.goodsList[data.goodsSortNo].distributeIncome = data.distributeIncome
        that.details.goodsList[data.goodsSortNo].skuFlag = data.skuFlag
        that.details.goodsList[data.goodsSortNo].income = data.income
        // that.selectGoodsVisible = false
      })
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.token = { accessToken: getToken() }

      this.loadDetails(this.details1)

      const that = this
      this.$bus.$on('resetDetailsGoods', function(details) {
        that.loadDetails(details)
      })
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.details.goodsList
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.details.goodsList = filters
      },
      loadDetails(details) {
        this.details = details
        if (details.propMap) {
          this.$set(this.details.propMap, 'sellOutIconType', details.propMap.sellOutIconType ? details.propMap.sellOutIconType.toString() : '10')
          this.$set(this.details.propMap, 'goodsStyle', details.propMap.goodsStyle ? details.propMap.goodsStyle.toString() : '12')
          this.$set(this.details.propMap, 'backgroundColor', details.propMap.backgroundColor ? details.propMap.backgroundColor : '')
          this.$set(this.details.propMap, 'goodsDetailStyle', details.propMap.goodsDetailStyle ? details.propMap.goodsDetailStyle.toString() : '10')
          this.$set(this.details.propMap, 'buyShow', details.propMap.showBuyButton ? details.propMap.showBuyButton === '1' : false)
          this.$set(this.details.propMap, 'backgroundType', details.propMap.backgroundType ? details.propMap.backgroundType.toString() : '10')
          this.$set(this.details.propMap, 'backgroundStyle', details.propMap.backgroundStyle ? details.propMap.backgroundStyle.toString() : '10')
          this.$set(this.details.propMap, 'buyButtonColor', details.propMap.buyButtonColor ? details.propMap.buyButtonColor : '')
          this.$set(this.details.propMap, 'radius', details.propMap.radius ? details.propMap.radius * 1 : 0)
          this.$set(this.details.propMap, 'verticalMargin', details.propMap.verticalMargin ? details.propMap.verticalMargin * 1 : 0)
          this.$set(this.details.propMap, 'horizontalMargin', details.propMap.horizontalMargin ? details.propMap.horizontalMargin * 1 : 0)
          this.$set(this.details.propMap, 'selectType', details.propMap.selectType ? details.propMap.selectType.toString() : '10')
          this.$set(this.details.propMap, 'selectMode', details.propMap.selectMode ? details.propMap.selectMode.toString() : '10')
          this.$set(this.details.propMap, 'modeId', details.propMap.modeId ? details.propMap.modeId : '')
          this.goodsCategoryIds = details.propMap.threeCategoryId || details.propMap.twoCategoryId || details.propMap.oneCategoryId || ''
          this.$set(this.details.propMap, 'goodsNumType', details.propMap.goodsNumType ? details.propMap.goodsNumType.toString() : '10')
          this.$set(this.details.propMap, 'goodsNumLimit', details.propMap.goodsNumLimit ? details.propMap.goodsNumLimit * 1 : 1)
          this.$set(this.details.propMap, 'backgroundImg', details.propMap.backgroundImg ? details.propMap.backgroundImg : 'http://veekrayimg.joinsun.vip/images/anchor-hot-bg.png')
          this.$set(this.details.propMap, 'goodsBackgroundColor', details.propMap.goodsBackgroundColor ? details.propMap.goodsBackgroundColor : '')
          this.$set(this.details.propMap, 'goodsTitleColor', details.propMap.goodsTitleColor ? details.propMap.goodsTitleColor : '#333333')
          this.$set(this.details.propMap, 'salesNumColor', details.propMap.salesNumColor ? details.propMap.salesNumColor : '#F8303D')
          this.$set(this.details.propMap, 'tagsBackgroundColor', details.propMap.tagsBackgroundColor ? details.propMap.tagsBackgroundColor : '#FEEAEB')
          this.$set(this.details.propMap, 'tagsColor', details.propMap.tagsColor ? details.propMap.tagsColor : '#F8303D')
          this.$set(this.details.propMap, 'incomeColor', details.propMap.incomeColor ? details.propMap.incomeColor : '#F8303D')
          this.$set(this.details.propMap, 'goodsPriceColor', details.propMap.goodsPriceColor ? details.propMap.goodsPriceColor : '#999999')
          this.$set(this.details.propMap, 'fontTitleColor', details.propMap.fontTitleColor ? details.propMap.fontTitleColor : '#999999')
          switch (this.details.propMap.selectMode) {
            default:
            case '10':
              this.initEnterpriseConfig()
              // 商品分类
              this.listGoodsCategory()
              this.listWholesaleGoodsCategory()
              break
            case '11':
              // 商品品牌
              this.listBrand()
              break
            case '12':
              // 品牌分类
              this.listBrandCategory()
              break
            case '13':
              // 商品分组
              this.listGoodsGroup()
              break
            case '20':
              // 供应商分类
              this.listSupplierCategory()
              break
            case '21':
              // 供应商地区
              this.listProvince()
              break
          }
        }
      },
      beforeUploadPicture(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
          return
        }
        this.fileLoadingPicture = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccessPicture(res, file) {
        this.fileLoadingPicture = true
        if (res.code === 101) {
          this.fileLoadingPicture = false
          this.details.propMap.backgroundImg = res.data[0]
        }
      },
      // 打开选择商品事件
      selectGoodsLayer(index) {
        this.selectGoodsVisible = true
        this.selectGoodsTitle = '选择商品'
        const that = this
        setTimeout(() => {
          that.$bus.$emit('selectComponentGoods', index)
        }, 100)
      },
      // 添加商品
      addGoods() {
        this.resetGoods()
        if (!this.details.goodsList) {
          this.details.goodsList = []
        }
        if (this.details.goodsList.length > 0) {
          this.goodsDetails.goodsSortNo = this.details.goodsList.length
        } else {
          this.goodsDetails.goodsSortNo = 0
        }
        this.goodsDetails.imgUrl = 'https://enterpriseimg.joinsun.vip/upload/default-pic-red.png'
        // this.details.goodsList.push(this.goodsDetails)
        this.selectGoodsLayer(this.details.goodsList.length - 1)
        // this.$emit('scrollBottom')
        // this.$nextTick(() => {
        //   const container = this.$el.querySelector('.goods-form')
        //   container.scrollTop = container.scrollHeight
        // })
      },
      changeModeId() {
        this.getGoodsPage()
      },
      getGoodsPage() {
        getGoodsPage({
          enterpriseId: this.getEnterpriseId(),
          appType: this.appType,
          propMap: {
            selectMode: this.details.propMap.selectMode,
            modeId: this.details.propMap.modeId
          }
        }).then(response => {
          if (response.isError) return
          this.details.goodsList = response.data.records
        })
      },
      // 删除商品
      removeGoods(label) {
        this.details.goodsList.splice(this.details.goodsList.findIndex(item => item === label), 1)
        for (let i = 0; i < this.details.goodsList.length; i++) {
          this.details.goodsList[i].goodsSortNo = i
        }
      },
      // 重置商品添加数据
      resetGoods() {
        this.goodsDetails = {
          componentGoodsId: '',
          detailsId: '',
          goodsId: '',
          goodsSortNo: 0,
          imgUrl: '',
          title: '',
          price: '',
          stock: ''
        }
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: []
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 50) {
            obj.propMap[key] = 50
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      },
      selectModeChange(e) {
        this.details.propMap.modeId = ''
        this.goodsCategoryIds = []
        this.supplierArea = {
          provinceCode: '',
          cityCode: '',
          districtCode: ''
        }
        switch (e) {
          case '10':
            this.listGoodsCategory()
            break
          case '11':
            this.listBrand()
            break
          case '12':
            this.listBrandCategory()
            break
          case '13':
            // 商品分组
            this.listGoodsGroup()
            break
          case '20':
            this.listSupplierCategory()
            break
          case '21':
            this.listProvince()
            break
        }
      },
      // 选择类目
      changeGoodsCategory(categoryIds) {
        if (categoryIds.length === 0) {
          return
        }
        this.details.propMap.modeId = categoryIds[categoryIds.length - 1]
        this.changeModeId()
      },
      // 获取品牌
      listBrand() {
        listBrand(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.brandList = response.data
        })
      },
      // 获取品牌分类
      listBrandCategory() {
        listBrandCategory(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.brandCategoryList = response.data
        })
      },
      // 获取商品分组
      listGoodsGroup() {
        listGoodsGroup({ enterpriseId: this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.goodsGroupList = response.data
        })
      },
      // 获取供应商分类
      listSupplierCategory() {
        listSupplierCategory({
          enterpriseId: this.getEnterpriseId()
        }).then(response => {
          if (response.isError) return
          this.supplierCategoryList = response.data
        })
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          if (response.isError) return
          this.categoryData = response.data
        })
      },
      // 获取批发商品类目
      listWholesaleGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listWholesaleGoodsCategory(enterpriseId).then(response => {
          this.wholesaleCategoryData = response.data
        })
      },
      // 获取系统参数
      initEnterpriseConfig() {
        const enterpriseId = this.getEnterpriseId()
        getByEnterpriseId(enterpriseId).then((response) => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      listProvince() {
        listProvince().then(response => {
          if (response.isError) return
          this.provinceList = response.data
        })
      },
      changeProvince(provinceCode, cityCode, districtCode) {
        if (!provinceCode) {
          return
        }
        this.details.propMap.modeId = provinceCode
        this.changeModeId()
        this.supplierArea.cityCode = cityCode || ''
        this.supplierArea.districtCode = districtCode || ''
        listCity(provinceCode).then(response => {
          if (response.isError) return
          this.cityList = response.data
          this.changeCity(cityCode, districtCode)
        })
      },
      changeCity(cityCode, districtCode) {
        if (!cityCode) {
          return
        }
        this.details.propMap.modeId = cityCode
        this.changeModeId()
        listDistrict(cityCode).then(response => {
          if (response.isError) return
          this.districtList = response.data
        })
        this.changeDistrict(districtCode || '')
      },
      changeDistrict(districtCode) {
        if (!districtCode) {
          return
        }
        this.details.propMap.modeId = districtCode
        this.supplierArea.districtCode = districtCode
        this.changeModeId()
      },
      checkboxChange(prop, val) {
        this.details1.propMap[prop] = val ? '1' : '0'
      }
    }
  }
</script>
<style lang="less" scoped>
.tips-row{
  font-size: 12px;
  padding: 6px 12px;
  background-color: rgba(236, 245, 255, 1);
}
.v-align-ct{
  display: flex;
  justify-content: left;
  align-items: flex-start;
}
.goods-num{
  width: 46px;
  text-align: center;
  line-height: 24px;
  background-color: rgba(246, 247, 249, 1);
}
.scroll-layer-box{
  height: 605px;
}
</style>
